import './DiscoverBanner.scss'
import React, { Component } from 'react'
import { Carousel } from 'antd';
import {
  LeftOutlined,
  RightOutlined
} from '@ant-design/icons';
import {Link} from 'react-router-dom'
import {getBanner} from '../../../api/index'
export default class DiscoverBanner extends Component {
  constructor(props) {
    super(props)
    this.bannerRef = React.createRef()
    this.state = {
      bannerList:[],
      current:0,
      bgImg:''
    }
  }
  componentDidMount () {
    getBanner().then(({data}) => {
      console.log(data.banners)
      if(data.banners[0].imageUrl) {
        this.setState({
          bannerList:data.banners,
          current:0,
          bgImg:data.banners[0].imageUrl+'?imageView&blur=40x20'
        })
      }
     
    })
  }
  goBannerPre = () => {
    console.log(this.state.bannerList)
    this.bannerRef.current.prev()
  }
  goBannerNext = () => {
    this.bannerRef.current.next()
  }
  changeBanner = (from, current) => {
    if(this.state.bannerList[0]) {
      this.setState({
        current,
        bgImg:this.state.bannerList[current].imageUrl+'?imageView&blur=40x20'
      })
    }
  }
  render() {
    const {bannerList,bgImg} = this.state
    return (
      <div className='banner_box'  style={{backgroundImage:`url(${bgImg})`,backgroundSize: '6000px',backgroundPosition: 'center center', }}>
        <div className="banner_center_box">
          <button className="banner_pre banner_change" onClick={this.goBannerPre}><LeftOutlined /></button>
          {/* 轮播图 */}
          <div className="carousel_box">
            <Carousel className='carousel' easing autoplay speed='2000' effect="fade" ref={this.bannerRef} beforeChange={(from, to) => {this.changeBanner(from, to)}}>
              {
                bannerList.map((item) => {
                  return (
                    <div key={item.encodeId}>
                      <img className='banner_item' alt='' src={item.imageUrl} />
                    </div>
                  )
                })
              }
            </Carousel>
          </div>
          <div className="download">
            <Link to='/download' className="download_bth"></Link>
            <p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
          </div>
          <button className="banner_next banner_change" onClick={this.goBannerNext}><RightOutlined /></button>
        </div>
      </div>
    )
  }
}
